<template>
	<div class="tuanduirenzheng">
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>团队认证</el-breadcrumb-item>
				<!-- <el-breadcrumb-item>成员管理</el-breadcrumb-item> -->
			</el-breadcrumb>
			<el-button size="mini" type="primary" style="float: right;margin-top: -20px;">解散团队</el-button>
			<!-- <breadcrumb></breadcrumb> -->
		</div>
		<div class="pageContent">
			<div class="contentHeader">修改团队类型</div>
			<div class="teamType">
				<div class="typeList" v-for="item in companyTypeList" :key="item.id" @click="selectType(item)" :class="postData.companyNature == item.id?'selectTypes':''">
					<el-image :src="item.remark?item.remark:$globalData.defaultImg" class="typeListImage" fit="cover"></el-image>
					<div class="teamTitle">{{ item.value }}</div>
				</div>
			</div>
			<div class="contentHeader">团队基本信息</div>
			<div class="basicInformation flex" style="justify-content: space-between;">
				<div>
					<el-form :model="postData" class="demo-form-inline" label-width="12rem">
						<el-form-item label="团队名称：">
							<el-input v-model="postData.companyName" class="ainput" placeholder="团队名称"></el-input>
						</el-form-item>
					</el-form>
					<el-form :inline="true" :model="companyUserInfo" class="demo-form-inline" label-width="12rem">
						<el-form-item label="管理员姓名：">
							<el-input v-model="companyUserInfo.name" disabled placeholder="管理员姓名"></el-input>
						</el-form-item>
						<el-form-item label="联系电话：" class="ael-form-item">
							<el-input v-model="companyUserInfo.phone" disabled placeholder="联系电话"></el-input>
						</el-form-item>
					</el-form>
					<!-- 地址不可编辑状态 -->
					<el-form :model="addressInfo" v-if="!isEditorAddress" class="demo-form-inline" label-width="12rem">
						<el-form-item label="团队注册地址：">
							<el-input v-model="addressInfo.oldAddress" disabled class="ainput" placeholder="团队注册地址"></el-input>
							<el-button icon="el-icon-edit" type="text" @click="isEditorAddress = true" style="margin-left: 10px;">编辑</el-button>
						</el-form-item>
					</el-form>
					<!-- 地址可编辑状态 -->
					<el-form :model="addressInfo" v-if="isEditorAddress" class="demo-form-inline" label-width="12rem">
						<el-form-item label="团队注册地址：">
								<area-cascader v-model="addressInfo.newAddress.selectData" :key="areaCascaderKey" style="width: 478px;" :data="$pcaa" :level="2" type="all"
								 icon="el-icon-arrow-down" placeholder="请选择地区"></area-cascader>
						</el-form-item>
						<el-form-item label="">
							<el-input v-model="addressInfo.newAddress.inputAddress" class="ainput" placeholder="团队注册地址"></el-input>
							<el-button icon="el-icon-circle-close" type="text" @click="isEditorAddress = false" style="margin-left: 10px;">取消编辑</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div class="uploadLogoImage">
					<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
					 :http-request="uploadLogoImg">
						<img v-if="postData.companyLogo" :src="postData.companyLogo" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						<div>
							<el-button type="text">上传公司LOGO</el-button>
						</div>
					</el-upload>
				</div>
				<!-- <el-image :src="$globalData.defaultImg" fit="cover" class="renzhengImgs"></el-image> -->
			</div>
			<div class="contentHeader">负责人信息</div>
			<div class="basicInformation flex" style="justify-content: space-between;">
				<div>
					<el-form :model="companyUserInfo" class="demo-form-inline" label-width="12rem">
						<el-form-item label="身份证号：">
							<el-input v-model="companyUserInfo.cardId" disabled class="ainput" placeholder="身份证号"></el-input>
						</el-form-item>
					</el-form>
					<div class="uploadcard flex" style="padding-left: 12rem;justify-content: space-between;">
						<el-upload class="InformationUpload rankPhotosListBox" disabled ref="InformationUpload" action="" :show-file-list="false">
							<div class="materials">
								<img :src="companyUserCheck.cardFront?companyUserCheck.cardFront:require('@/assets/image/working/front1.png')" class="InformationImgs" alt="">
							</div>
						</el-upload>
						<el-upload class="InformationUpload rankPhotosListBox" disabled ref="InformationUpload" action="" :show-file-list="false">
							<div class="materials">
								<img :src="companyUserCheck.cardReverse?companyUserCheck.cardReverse:require('@/assets/image/working/reverse1.png')" class="InformationImgs" alt="">
							</div>
						</el-upload>
						<el-upload class="InformationUpload rankPhotosListBox" disabled ref="InformationUpload" action="" :show-file-list="false">
							<div class="materials">
								<img :src="companyUserCheck.holdingCard?companyUserCheck.holdingCard:require('@/assets/image/working/hand1.png')" class="InformationImgs" alt="">
							</div>
						</el-upload>
					</div>
					<div class="InformationUploadTip">为更好的服务，身份证件仅仅用作验证用户真实性，一般用户不可下载及复制</div>
				</div>

			</div>
			<div class="contentHeader">团队认证情况</div>
			<el-form :model="postData" class="demo-form-inline" label-width="12rem">
				<el-form-item label="组织代码：">
					<el-input v-model="postData.organizationCode" class="ainput" placeholder="组织代码"></el-input>
				</el-form-item>
			</el-form>
			<div class="basicInformation flex" style="padding-left: 12rem;margin-bottom: 0px;">
				<div class="rankPhotos flex">
					<div class="rankPhotosListBox" v-for="(item, index) in postData.licensePicture">
						<i class="el-icon-error deleteRankPhoto" title="删除材料" @click="deleteImages(index)"></i>
						<img :src="item?item:$globalData.defaultImg" class="InformationImgs" alt="">
						<!-- <el-image :src="$globalData.defaultImg" fit="cover" class="InformationImgs"></el-image> -->
					</div>
					<el-upload class="InformationUpload rankPhotosListBox" ref="InformationUpload" action="" :http-request="upLoadFiles" :show-file-list="false">
						<div class="materials">
							<i class="el-icon-plus avatar-uploader-icon"></i>
							<p>上传团队认证材料</p>
						</div>
					</el-upload>
				</div>
			</div>
			<div class="InformationUploadTip">为更好的服务，证件仅仅用于平台验证用户真实性，其他用户无法查看和下载。</div>
			<div class="bottomBtns">
				<el-button @click="$router.back()">返回上一页</el-button>
				<el-button @click="postSubmitCompanyCertification" :loading="btnLading" type="primary">确认修改</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import breadcrumb from '../components/breadcrumb.vue'
	export default {
		components: {
			breadcrumb
		},
		data() {
			return {
				pageData: {},
				companyId: '',
				companyName: this.$store.state.company.companyName,
				postData: {
					id: '',//公司id
					companyNature: '', //要创建的公司类型数据
					companyLogo: '' ,// 公司logo
					companyName: '',//公司名称
					organizationCode: '',//组织机构代码
					licensePicture: [],//执照图片文件
					areaInfo: ''// 地址信息
				},
				companyTypeList: '', // 要创建的公司类型数据数组
				isEditorAddress: false,// 编辑地址信息，false为不可编辑，true为可编辑
				addressInfo:{
					// 地址信息
					oldAddress: '', // 旧地址
					newAddress: {
						// 新地址
						selectData: '',
						inputAddress: ''
					}
				},
				// 负责人信息
				companyUserInfo: {},
				// 负责人身份证明材料
				companyUserCheck: {},
				areaCascader: '', // 地址选择器时候显示下拉框
				areaCascaderKey: new Date().getTime(),
				btnLading: false
			}
		},
		watch:{
			isEditorAddress(newdata){
				if(newdata){
					this.addressInfo.newAddress.selectData = ''
					this.addressInfo.newAddress.inputAddress = ''
				}
			},
			areaCascader(newData){
				// console.log(a, 111)
				if(!newData && !this.addressInfo.newAddress.selectData){
					this.areaCascaderKey = new Date().getTime()
				}
			},
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 22)
			let userInfo = this.$store.state.user.userInfo
			this.userId = userInfo.id
			this.companyId = this.postData.id = this.$store.state.company.selectCompanyId?this.$store.state.company.selectCompanyId:this.$store.state.company.companyId
			this.getCompanyTypeList()
			this.getCompanyInformation()
		},
		methods: {
			postSubmitCompanyCertification(){
				// 提交修改submitCompanyCertification
				if(this.isEditorAddress){
					// 判断地址是否在编辑状态
					let addressData = []
					if(this.addressInfo.newAddress.selectData){
						// 判断是否有选择地址
						this.addressInfo.newAddress.selectData.forEach((v, i)=>{
							for(let key in v){
								addressData.push(v[key])
							}
						})
					}
					// 拼接地址
					this.postData.areaInfo = addressData.join('') + this.addressInfo.newAddress.inputAddress
				} else {
					this.postData.areaInfo = this.addressInfo.oldAddress
				}
				if(!this.postData.companyName){
					this.$message.error('公司名称不能为空')
					return
				} else if(!this.postData.organizationCode){
					this.$message.error('组织机构代码不能为空')
					return
				} else if(!this.postData.areaInfo){
					this.$message.error('地址不能为空')
					return
				} else if(this.postData.licensePicture.length < 1){
					this.$message.error('至少上传一张组织机构证明材料')
					return
				}
				this.btnLading = true
				this.$request.postForm(this.$api.submitCompanyCertification, this.postData).then(res => {
					if (res.code == 200) {
						this.$message.success('修改成功')
						this.btnLading = false
						setTimeout(()=>{
							this.$router.back()
						},300)
					}
				})
			},
			getCompanyTypeList() {
				// 获取公司类型数据
				this.$request.postForm(this.$api.getCompanyType).then(res => {
					if (res.code == 200) {
						this.companyTypeList = res.data
					}
				})
			},
			getCompanyInformation() {
				this.$request.postForm(this.$api.getCompanyCertificationDetail, {
					userId: this.userId,
					isUpd: true,
					companyId: this.companyId
				}).then(res => {
					if (res.code == 200) {
						let data = res.data
						// 公司类型
						this.postData.companyNature = data.company.companyNatureId
						// 公司地址
						this.addressInfo.oldAddress = data.company.registeredAddress
						// 公司logo
						this.postData.companyLogo = data.company.companyLogo
						// 公司名称
						this.postData.companyName = data.company.companyName
						//组织机构代码
						this.postData.organizationCode = data.company.organizationCode
						// 执照文件
						data.company.companyLicenseEntityList.forEach((v)=>{
							this.postData.licensePicture.push(v.licensePicture)
						})
						// 用户
						this.companyUserCheck = data.userCheck
						
						this.companyUserInfo = data.userInfo
					}
				}).catch(err=>{
					// console.log(err)
					if(err.code == 400){
						this.$router.back()
					}
				})
			},
			selectType(item) {
				// 选择公司类型
				this.postData.companyNature = item.id
			},
			uploadLogoImg(file) {
				// 上传logo
				let File = file.file
				let fileSize = 1024 * 1024 * 2 // 限制大小2MB
				if (File.size > fileSize || File.type != 'image/jpeg') {
					this.$message.error('上传图片大小不能大于2M，且必须为jpg格式')
					return
				}
				let formData = new FormData()
				formData.append('identifier', 'logo')
				formData.append('file', File)
				this.$request.uploading(this.$api.uploadImg, formData).then(res => {
					if (res.code == 200) {
						this.postData.companyLogo = res.data
					}
				})
			},
			upLoadFiles(file) {
				// 上传执照图片
				let File = file.file
				let fileSize = 1024 * 1024 * 2 // 限制大小2MB
				if (File.size > fileSize || File.type != 'image/jpeg') {
					this.$message.error('上传图片大小不能大于2M，且必须为jpg格式')
					return
				}
				let formData = new FormData()
				formData.append('identifier', 'placeBusiness')
				formData.append('file', File)
				this.$request.uploading(this.$api.uploadImg, formData).then(res => {
					if (res.code == 200) {
						this.postData.licensePicture.push(res.data)
					}
				})
			},
			deleteImages(i) {
				// 删除执照图片
				this.postData.licensePicture.splice(i, 1)
			},
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb {
		padding: 20px;
		border-bottom: 1px solid #DCDCDC;
	}

	.pageContent {
		padding: 20px;
	}

	/* .contentHeader {
		color: #333333;
		font-size: 16px;
		position: relative;
		width: 100px;
		text-align: right;
		margin-bottom: 20px;
	}

	.contentHeader::after {
		content: '';
		width: 730px;
		top: 50%;
		border-bottom: 1px dotted #DCDCDC;
		position: absolute;
		left: 120px;
	} */
.contentHeader{
		width: 100%;
		padding: 10px 20px;
		color: #333333;
		font-size: 16px;
		background: #F3F3F3;
		margin-bottom: 20px;
	}
	.teamType {
		/* width: 80%; */
		/* margin-left: 10%; */
		padding-left: 12rem;
		justify-content: space-evenly;
		margin-bottom: 60px;
	}

	.typeList {
		width: 100px;
		height: 110px;
		border-radius: 5px;
		border: 1px solid #DCDCDC;
		text-align: center;
		padding: 20px;
		cursor: pointer;
		display: inline-block;
		margin: 0 20px;
	}

	.typeList:first-child {
		margin-left: 0;
	}

	.typeList:last-child {
		margin-right: 0;
	}

	.typeListImage {
		width: 50px;
		height: 50px;
		border-radius: 100%;
	}

	.typeList:hover,
	.selectTypes {
		border-color: #23B14D;
		/* border-width: 2px; */
		background: rgba(35, 177, 77, 0.1);
		box-shadow: 0 0 5px 1px #23B14D;
	}

	.ainput {
		width: 478px;
	}

	.aainput {
		width: 270px;
		margin-left: 10px;
	}

	.ael-form-item>>>.el-form-item__label {
		width: 100px !important;
	}

	.InformationUploadTip {
		padding-left: 12rem;
		color: #AAAAAA;
		font-size: 12px;
		margin-top: 10px;
		margin-bottom: 60px;
	}

	.rankPhotos {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.rankPhotosListBox {
		width: 210px;
		height: 138px;
		border: 1px solid #DCDCDC;
		position: relative;
		text-align: center;
		margin-right: 15px;
		margin-bottom: 15px;
	}

	.deleteRankPhoto {
		color: darkred;
		position: absolute;
		top: -10px;
		right: -10px;
		z-index: 5;
		font-size: 24px;
		cursor: pointer;
		background: #fff;
		border-radius: 100%;
	}

	.InformationUpload {
		margin-right: 20px;

	}

	.materials {
		width: 210px;
		height: 138px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		text-align: center;
		border: 1px solid #DCDCDC;
	}

	.InformationImgs {
		width: 100%;
		height: 100%;
	}

	.materials .avatar-uploader-icon {
		width: 100%;
		height: 50px;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.materials p {
		width: 100%;
		color: #AAAAAA;
		font-size: 12px;
	}

	.basicInformation {
		margin-bottom: 60px;
	}

	.renzhengImgs {
		width: 100px;
		height: 100px;
		margin-right: 75px;
		border-radius: 3px;
		/* float: right; */
	}

	/* .uploadcard */
	/* .uploadLogoImage {
		padding-right: 75px;
	} */

	.uploadLogoImage>>>.avatar,
	.uploadLogoImage>>>.avatar-uploader-icon {
		width: 100px;
		height: 100px;
		border: 1px dotted #DCDCDC;
		border-radius: 10px;
		margin-bottom: 5px;
		display: block;
	}
	.bottomBtns{
		margin-top: 30px;
		text-align: center;
	}
</style>
